<template>
  <view class="app-container">
    <view class="topfloat"></view>
    <view
      class="top-content"
      style
    >
      <u-tabs-swiper
        style="position: fixed;"
        bg-color="linear-gradient(to left, #1040BE, #026DFF)"
        active-color="#ffffff"
        inactive-color="#ffffff"
        color="#ffffff"
        ref="uTabs"
        :list="tabList"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <view class="top">
      <view
        class="date"
        @click="handlelevelOptions()"
      >
        <image
          src="../../static/images/xiala.png"
          mode="aspectFit"
          class="image"
        />
        <view>
          <u-tag
            :text="text1"
            mode="plain"
            type="primary"
            shape="square"
            style="width: 180rpx;text-align: center;"
          />
          <u-select
            v-model="show"
            mode="single-column"
            :list="levelOptions"
            @confirm="confirm"
          ></u-select>
        </view>
      </view>
      <u-input
        v-model="queryParams.sn"
        :border="true"
        @input="inputChange"
        placeholder="请输入产品代码"
        :clearable="true"
      />
      <u-button
        type="primary"
        size="mini"
        class="btn"
        style="margin-left:5rpx;margin-top:5rpx"
        @click="cancel"
      >重置</u-button>
    </view>
    <view class="box-contet">
      <swiper
        class="cardlist"
        :current="current"
        @change="change"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item,index) in 2"
          :key="index"
        >
          <scroll-view
            scroll-y
            @scrolltolower="handle"
            :lower-threshold="250"
            class="scrollHeight"
          >
            <scroll-view
              :scroll-y="true"
              class="swiper-item"
              @scrolltolower="onreachBottom"
            >
              <view
                class
                style="height: 10rpx; color: #eee"
              ></view>
              <view class="card-item">
                <CardBox
                  v-for="(item1,index1) of list"
                  :key="index1"
                  :data="item1"
                  @cache="getList"
                >
                  视频:{{item1.name}}
                </CardBox>

                <u-loadmore
                  class="loadmore"
                  :status="status"
                  :loadText="loadText"
                />
              </view>

            </scroll-view>
          </scroll-view>
        </swiper-item>
      </swiper>

    </view>
    <!-- <view
      @click="handleAllDelete"
      class="deleteAll"
    >
      删除全部视频缓存
    </view> -->
  </view>
</template>

<script>
import { monitorlist, eventDetail,dataQuery } from "@/api/index";
import WucTab from "@/components/wuc-tab/wuc-tab.vue";
import CardBox from "./components/CardBox";
export default {
  components: { WucTab, CardBox },
  props: {},
  data() {
    return {
        timer:null,
      text1: "报警等级",
      show: false,
      value: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        ruleName: undefined,
        sn: undefined,
        description: undefined,
        severity: undefined,
        recovered: false,
        orderByColumn: "start",
        isAsc: "desc"
      },
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      statusOptions: [
        {
          value: true,
          label: "已恢复"
        },
        {
          value: false,
          label: "未恢复"
        }
      ],
     
      levelOptions: [
        {
          value: "0",
          label: "紧急"
        },
        {
          value: "1",
          label: "重要"
        },
        {
          value: "2",
          label: "次要"
        },
        {
          value: "3",
          label: "提示"
        }
      ],
      tabList: [
        {
          name: "未恢复报警"
        },
        {
          name: "全部报警"
        }
      ],
      status: "nomore",
      loadText: {
        loadmore: "暂无数据",
        loading: "努力加载中",
        nomore: "没有更多数据"
      },
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      list: [
        // {
        //   name: "视频一",
        //   url:
        //     "http://pre-cg-iot.yunzhen.tech/profile/upload/2021/09/08/3404ea58-4df3-491f-aec1-8e10b335db71.mp4",
        //   contractNumber: "25252525",
        //   productNumber: "2"
        // },
        // {
        //   name: "视频一",
        //   url:
        //     "http://pre-cg-iot.yunzhen.tech/profile/upload/2021/09/22/25c0b1cb-bad0-4b21-8c3e-b9447a3e20fb.mp4",
        //   contractNumber: "2252625",
        //   productNumber: "5"
        // }
      ],
      cacheList: [],
      url: ""
    };
  },
  onShow() {
    this.getList();
    let that = this;
    that.cacheList = uni.getStorageSync("cacheList");
    let roleKey = uni.getStorageSync("roleKey");
    if(roleKey=='Inspector'){
 this.timer = setInterval(function() {
      const code = "alarm_summary";
      let number = 0;
      dataQuery({}, code).then(res => {
        res.forEach(item => {
          if (item.label === "notRecovered") {
            if (item.value) {
                uni.showTabBarRedDot({
	                index: 1
                })
            } else {
              uni.removeTabBarBadge({
		             index:1
              })
            }
          }else {
             uni.removeTabBarBadge({
		             index:1
              })
          }
        });
        // // 赋值给报警列表铃铛的角标
        // i[0].setAttribute("badge-text", number);
      });
    }, 5000);
    }else {

    }
    
  },
  onLoad: function(val) {
    uni.startPullDownRefresh();
  },
  onHide() {
      clearInterval(this.timer);
      this.timer = null;
  },
  methods: {
    handlelevelOptions() {
      this.show = true;
    },
    confirm(e) {
      this.text1 = e[0].label;
      this.queryParams.severity = e[0].value;
      this.getList()
    },
    handle() {},
    cancel() {
      this.queryParams.ruleName = undefined;
      this.queryParams.severity = undefined;
      this.text1 ="报警等级"
      this.getList();
    },
    getList() {
      uni.showLoading({
        title: "加载中"
      });
      // this.status = "loading";
      const data = this.queryParams;
      if (this.current === 0) {
        data.recovered = false;
      } else {
        data.recovered = undefined;
      }
      monitorlist(data).then(res => {
        if (res.rows.length > 0) {
        } else {
          this.status = "loadmore";
        }

        uni.hideLoading();
        this.total = res.total;
        this.list = res.rows;
        // this.list = res.rows.concat(
        //   res.rows.concat(res.rows.concat(res.rows))
        // );
      });
    },
    inputChange() {
      this.getList();
    },
    tabsChange(index) {
      this.current = index;
      this.cancel()
    //   this.getList();
    },
    change(index) {
      this.current = index.detail.current;
    //   this.getList();
    this.cancel()
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if (this.queryParams.pageSize < this.total) {
        this.queryParams.pageSize += 5;
        this.status = "loading";
        this.getList();
      } else {
        this.status = "nomore";
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  overflow: hidden;
  background-color: white;
  .top-content {
    height: 160upx;
    background: linear-gradient(to left, #1040be, #026dff);
  }
  .app-head {
    position: absolute;
    padding: 30rpx;
    width: 100%;
    top: 100rpx;
    background-color: white;
    display: flex;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: 45px;
  }

  .box-contet {
    height: calc(100% - 180upx);
    margin-top: 20rpx;
    .cardlist {
      height: 100%;
      .scrollHeight {
        height: 100%;
        .swiper-item {
          height: 100%;
          .card-item {
            width: 100%;
            padding: 30rpx;
          }
        }
      }
    }
  }
}

.top {
  z-index: 10;
  position: absolute;
  padding: 31rpx 31rpx 16rpx 31rpx;
  width: 100%;
  top: 100rpx;
  background-color: white;
  display: flex;
  border-radius: 40rpx 40rpx 0 0;
  .btn {
    position: absolute;
    right: 35rpx;
    border-radius: 16rpx;
  }
  /deep/ .u-btn--primary {
    background: linear-gradient(to left, #1040be, #026dff);
  }
  /deep/ .uni-input-placeholder {
    font-size: 22rpx;
    color: #989898 !important;
    // line-height:100upx;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
  /deep/ .u-flex {
    // margin-right: 20rpx;
  }
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 45rpx;
    // height: 80upx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-input--border {
    border: 1px solid #eee !important;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    // color: #989898 !important;
    // height: 60upx;
    // line-height: 20upx;
  }
  /deep/ .u-input__input {
    min-height: 55upx !important;
    color: #989898 !important;
  }
}
/deep/ .u-input--border {
  border: 1px solid #eee !important;
  border-radius: 16rpx;
  // color: #989898 !important;
  // height: 60upx;
  // line-height: 20upx;
}
/deep/ .uni-input-placeholder {
  font-size: 22rpx;
  color: #989898 !important;
  // line-height:100upx;
}
.deleteAll {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
}
/deep/ .u-input--border {
  padding: 1px 9px !important;
}
.date {
  margin-right: 10rpx;
  display: flex;
  align-items: center;

  image {
    width: 50rpx;
    height: 50rpx;
  }
}
</style>